<template>
  <el-card  class="page-card">
    <div>
      <!-- <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>

      <template v-if="value === '1'">
        <el-input
          placeholder="请输入分类ID"
          key="categoryId-input"
          style="width: 300px; margin-right: 20px"
          prefix-icon="el-icon-search"
          v-model="form.categoryId"
          clearable
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="categoryIdSearch"
          >搜索</el-button
        >
      </template>
      <template v-else> -->
        <el-input
          placeholder="请输入分类名称"
          key="categoryName-input"
          style="width: 300px; margin-right: 20px"
          prefix-icon="el-icon-search"
          v-model="form.categoryName"
          clearable
          class="input-box"
        ></el-input>

        <el-button
          type="primary"
          icon="el-icon-search"
          @click="categoryNameSearch"
          class="button-style1"
          >搜索</el-button
        >
      <!-- </template> -->
      <el-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        @click="dialogFormVisible2=true"
        class="button-style2"
        >添加</el-button
      >
    </div>
    <div>
      <el-table :data="list" height="550" stripe border style="width: 100%">
      <el-table-column
      type="index"
      width="80"
      :index="1">
    </el-table-column>>
        <el-table-column prop="categoryId" label="收支分类ID" width="250">
        </el-table-column>
        <el-table-column prop="categoryType" label="分类类型" width="250">
        </el-table-column>
        <el-table-column prop="categoryName" label="分类名称" width="250">
        </el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="showInformation(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="deleteCategory(scope.$index, scope.row)"
              >删除</el-button
            >

            <!-- 分类修改弹窗 -->
            <el-dialog title="分类修改" :visible.sync="dialogFormVisible">
              <el-form :model="form" ref="form">
                <el-form-item label="类型修改" :label-width="formLabelWidth">
                  <el-select v-model="type" placeholder="请选择">
                    <el-option
                      v-for="item in optionsType"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="名称修改" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.categoryName"
                    placeholder="请输入新的分类名称"
                  ></el-input>
                </el-form-item>
              </el-form>
              <!-- <span>{{ form.nickname }}</span> -->

              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button
                  type="primary"
                  @click="(dialogFormVisible = false), (innerVisible = true)"
                  >确 定</el-button
                >
              </div>
              <el-dialog
                width="30%"
                title="确认修改?"
                :visible.sync="innerVisible"
                append-to-body
              >
                <div slot="footer" class="dialog-footer">
                  <el-button
                    @click="(innerVisible = false), (dialogFormVisible = true)"
                    >取 消</el-button
                  >
                  <el-button type="primary" @click="updateCatagoryName"
                    >确 定</el-button
                  >
                </div>
              </el-dialog>
            </el-dialog>

            <!-- 分类添加弹窗 -->
            <el-dialog title="添加分类" :visible.sync="dialogFormVisible2">
              <el-form :model="form" ref="form">
                <el-form-item label="分类类型" :label-width="formLabelWidth">
                  <el-select v-model="type" placeholder="请选择">
                    <el-option
                      v-for="item in optionsType"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="分类名称" :label-width="formLabelWidth">
                  <el-input
                    v-model="newType.categoryName"
                    placeholder="请输入新的分类名称"
                  ></el-input>
                </el-form-item>
              </el-form>
              <!-- <span>{{ form.nickname }}</span> -->

              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                <el-button
                  type="primary"
                  @click="(dialogFormVisible2 = false), (innerVisible2 = true)"
                  >确 定</el-button
                >
              </div>
              <el-dialog
                width="30%"
                title="确认添加？"
                :visible.sync="innerVisible2"
                append-to-body
              >
                <div slot="footer" class="dialog-footer">
                  <el-button
                    @click="(innerVisible2 = false), (dialogFormVisible2 = true)"
                    >取 消</el-button
                  >
                  <el-button type="primary"  @click="addCategory"
                    >确 定</el-button
                  >
                </div>
              </el-dialog>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>
 
  
</template>

<script>
import Common from "../utils/Common.vue";
export default {
  name: "Secondpage",
  data() {
    return {
      list: [
        // {
        //   categoryId: "222",
        //   categoryType: "0",
        //   categoryName: "hhhh",
        // },
        //  {
        //   categoryId: "222",
        //   categoryType: "0",
        //   categoryName: "hhhh",
        // },
        //  {
        //   categoryId: "222",
        //   categoryType: "0",
        //   categoryName: "hhhh",
        // },
      ],
      options: [
        {
          value: "1",
          label: "分类ID",
        },
        {
          value: "2",
          label: "分类名称",
        },
      ],
      value: "",
      form: {
        categoryId: "",
        categoryType: "",
        categoryName: "",
      },
      type: "",
      newType: {
        categoryName: "",
        categoryType: "",
      },
      formType: {
        categoryType: "",
      },
      optionsType: [
        {
          value: "0",
          label: "收入",
        },
        {
          value: "1",
          label: "支出",
        },
      ],
      dialogFormVisible: false,
      dialogFormVisible2: false,
      innerVisible: false,
      innerVisible2: false,
      formLabelWidth: "120px",
    };
  },
  mounted() {
    this.initPage();
  },
  methods: {
    addCategory() {
      console.log("进入添加函数");
      console.log(this.type);
      console.log(this.newType.categoryName);
      this.dialogFormVisible2 = false;
      (this.innerVisible2 = false),
        this.$axios({
          headers: {
            "Content-Type": "application/x-www-form-urlencoded", // 一定要设置这个头
          },
          method: "POST",
          url: Common.base_url + "/admins/categories",
          data: this.$qs.stringify({
            // 一定要使用这个 stringify 方法！！！
            categoryType: this.type,
            categoryName: this.newType.categoryName,
          }),
        }).then((res) => {
          // 请求成功，代表与服务器建立连接
          console.log(res.data);
          console.log("请求成功！");
          this.initPage();
          if (res.data.resultCode == 200 && res.data.message == "SUCCESS") {
            // 登录成功，跳转到后台
            console.log("成功！");
            this.initPage();
          } else {
            // 登录失败，弹出提示
            console.log("失败！");
            // this.$message({
            //   message: "账号或密码错误。",
            //   type: "error",
            // });
          }
        });
    },
    updateCatagoryName() {
      //输入的判断
      // if (form.nickname.length > 4) {
      //   this.$message({
      //     message: "名称长度不超过4个字符",
      //     type: "error",
      //   });
      // } else if (form.nickname.length <= 0) {
      //   this.$message({
      //     message: "名称不能为空",
      //     type: "error",
      //   });
      // } else {
      //////
      this.innerVisible = false;
      console.log("进入更新函数");
      console.log(this.form);
      // console.log(this.form.userId);

      this.$axios({
        headers: {
          "Content-Type": "application/x-www-form-urlencoded", // 一定要设置这个头
        },
        method: "PUT",
        url: Common.base_url + "/admins/categories",
        data: this.$qs.stringify({
          // 一定要使用这个 stringify 方法！！！
          categoryId: this.form.categoryId,
          categoryType: this.form.categoryType,
          categoryName: this.form.categoryName,
        }),
      })
        .then((res) => {
          // 请求成功，代表与服务器建立连接
          // console.log(res.data);
          this.initPage();
          this.list.categoryName = this.form.categoryName;
          console.log(this.list.categoryName);
          console.log("请求成功！");
          this.$message({
            message: "修改成功。",
            type: "success",
          });
        })
        .catch((res) => {
          console.log("连接失败");
          console.log(res);
          this.$message({
            message: "连接服务器失败。",
            type: "error",
          });
        });
    },
    showInformation(index, row) {
      this.dialogFormVisible = true;
      // this.form=row;
      Object.assign(this.form, row);
      // console.log(index, row); //成功获取信息
      console.log(row);
      console.log(this.form);
    },
    //根据categoryId查询一个分类
    categoryIdSearch() {
      //输入判断
      this.$axios({
        // headers: {
        //   "Content-Type": "application/x-www-form-urlencoded",  // 一定要设置这个头
        // },
        method: "GET",
        url: Common.base_url + "/admins/categories/" + this.form.categoryId,
        params: {
          categoryId: this.form.categoryId,
        },
      })
        .then((response) => {
          console.log(response.data);
          console.log([response.data.data]);
          console.log("获取数据成功");

          this.list = [response.data.data];
        })
        .catch((error) => {
          console.log(error);
          console.log("数据获取失败");
        });
    },

    //根据categoryName查询一个分类
    categoryNameSearch() {
      //输入判断
      this.$axios({
        // headers: {
        //   "Content-Type": "application/x-www-form-urlencoded",  // 一定要设置这个头
        // },
        method: "GET",
        url: Common.base_url + "/admins/categories/" + this.form.categoryName,
        params: {
          categoryName: this.form.categoryName,
        },
      })
        .then((response) => {
          // console.log(response.data.data);
          console.log([response.data.data]);
          console.log("获取数据成功");

          this.list = [response.data.data];
        })
        .catch((error) => {
          console.log(error);
          console.log("数据获取失败");
        });
    },

    deleteCategory(index, row) {
      // console.log(row);
      // console.log(this.form.categoryId); //为空
      console.log(row.categoryId);
      this.$confirm("此操作将永久删除该分类, 是否继续?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        console.log("进入删除函数");
        //删除的axios
        this.$axios({
          // headers: {
          //   "Content-Type": "application/x-www-form-urlencoded",  // 一定要设置这个头
          // },
          method: "DELETE",
          url: Common.base_url + "/admins/categories/" + row.categoryId,
          params: {
            categoryId: row.categoryId,
          },
        })
          .then((response) => {
            // console.log(response.data.data);
            console.log(response.data);
            console.log("获取数据成功");
            this.initPage();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      });
    },

    //页面刷新获取所有分类
    initPage() {
      this.$axios({
        // headers: {
        //   "Content-Type": "application/x-www-form-urlencoded",  // 一定要设置这个头
        // },
        method: "GET",
        url: Common.base_url + "/admins/categories",
      })
        .then((response) => {
          // console.log(response);
          this.list = response.data.data;
          console.log("页面刷新成功");
        })
        .catch((error) => {
          console.log("数据获取失败");
          console.log(error);
        });
    },
  },
};
</script>

<style>
.page-card {
  box-shadow: 0 0 25px #b8b9bb;
  height: 618px;
  border-radius: 25px;
  /* background-color: rgb(252, 248, 196); */
}
.button-style1 {
  color: #9e9e9e;
  background-color: #b8f1ff;
   border: rgb(226, 226, 226);
}
.button-style2 {
  color: #9e9e9e;
  background-color: #abfc97;
   border: rgb(226, 226, 226);
}
</style>